import { type FC } from 'react';

import {
  Col as ACol,
  Row as ARow,
  Form as AForm,
  Input as AInput,
  Select as ASelect,
  Radio as ARadio,
} from 'antd';

import { type SysUserItem } from '@/api/systemUserApi';
import { EnableStatusType } from '@/constants';

import type { FormInstance } from 'antd';

/**
 * 系统用户添加/编辑表单组件的属性接口
 */
interface SystemUserAddProps {
  /** 表单实例 */
  form: FormInstance;
  /** 用户数据（编辑时使用） */
  data: SysUserItem;
  /** 角色选项列表 */
  roleOptions: Array<{ label: string; value: number }>;
  /** 是否为编辑模式 */
  isEdit?: boolean;
}

/** 生成随机密码（预留功能） */
const _generateRandomPassword = () => {
  const length = 8;
  const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let password = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charset.length);
    password += charset[randomIndex];
  }
  return password;
};

/**
 * 系统用户添加/编辑表单组件
 * 提供用户信息的录入和编辑功能
 */
const SystemUserAddForm: FC<SystemUserAddProps> = props => {
  const { roleOptions, isEdit = false } = props;

  // 预留：用于初始化表单数据
  useEffect(() => {
    // 获取用户数据，并设置表单的值
    // form.setFieldValue('password', data.password || _generateRandomPassword());
    // form.setFieldValue('orgId', data.orgId || 1);
  }, []);
  return (
    <ARow gutter={8}>
      <AForm.Item
        name="password"
        label="用户名"
        hidden
        rules={[{ required: false, message: '请输入用户名' }]}
      >
        <AInput placeholder="请输入用户名" allowClear />
      </AForm.Item>
      <AForm.Item
        name="orgId"
        label="用户名"
        hidden
        rules={[{ required: false, message: '请输入用户名' }]}
      >
        <AInput placeholder="请输入用户名" allowClear />
      </AForm.Item>
      <ACol span={24}>
        <AForm.Item
          name="userName"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <AInput
            placeholder="请输入用户名"
            allowClear
            disabled={isEdit} // 编辑时用户名不可修改
          />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
          <AInput placeholder="请输入姓名" allowClear />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item
          name="phone"
          label="手机号"
          rules={[
            { required: true, message: '请输入手机号' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入正确的手机号格式',
            },
          ]}
        >
          <AInput placeholder="请输入手机号" allowClear />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item
          name="email"
          label="邮箱"
          rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
        >
          <AInput placeholder="请输入邮箱" allowClear />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item name="roleId" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
          <ASelect
            placeholder="请选择角色"
            allowClear
            options={roleOptions}
            showSearch
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
          />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item
          name="isEnable"
          label="状态"
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <ARadio.Group>
            <ARadio value={EnableStatusType.ENABLED.value}>{EnableStatusType.ENABLED.label}</ARadio>
            <ARadio value={EnableStatusType.DISABLED.value}>
              {EnableStatusType.DISABLED.label}
            </ARadio>
          </ARadio.Group>
        </AForm.Item>
      </ACol>
    </ARow>
  );
};

export default SystemUserAddForm;
